import React from 'react'
import Logo from '../../components/logo/logo'

import {Redirect} from 'react-router-dom'
import {List, InputItem, Radio, WhiteSpace, WingBlank, Button} from 'antd-mobile'
import {connect} from 'react-redux'
import {register} from '../../redux/user.redux'
import ImoocForm from '../../components/imooc-form/imooc-form'

@connect(
    state => state.user,
    {register}
)
@ImoocForm
class Register extends React.Component{
    constructor(props){
        super(props);

        this.handleRegister = this.handleRegister.bind(this);
    }
    componentDidMount(){
        this.props.handleChange('type','genuis')
    }
    register(){
        this.props.history.push('/register')
    }

    // handleChange(key,val){
    //     this.setState({
    //         [key]:val
    //     })
    // }

    handleRegister(){
        this.props.register(this.props.state)
    }

    render(){
        const RadioItem = Radio.RadioItem
        return (
            <div>
                {this.props.redirectTo ? <Redirect to={this.props.redirectTo} /> : null}
                <Logo></Logo>
                <List>
                    {this.props.msg ? <p className="error-msg">{this.props.msg}</p> : null}
                    <InputItem 
                        onChange={v=>this.props.handleChange('user',v)}
                    >用户名</InputItem>   
                    <InputItem
                        type="password"
                        onChange={v=>this.props.handleChange('pwd',v)}
                    >密码</InputItem> 
                    <InputItem
                        type="password"
                        onChange={v=>this.props.handleChange('repeatpwd',v)}
                    >确认密码</InputItem> 
                    <WhiteSpace />
                    <RadioItem 
                        checked={this.props.state.type === 'genuis'}
                        onChange={()=>this.props.handleChange('type','genuis')}
                    >
                        牛人
                    </RadioItem>   
                    <RadioItem 
                        checked={this.props.state.type === 'boss'}
                        onChange={()=>this.props.handleChange('type','boss')}
                    >
                        老板
                    </RadioItem>  
                    <WhiteSpace />
                    <Button type="primary" onClick={this.handleRegister}>注册</Button>
                </List>
            </div>
        )
    }
}

export default Register